<template>
  <div class="wrapper" @mousemove="handleMouseMove" @mouseleave="handleMouseLeave">
    <div class="tip"> 单位:亿元 </div>
    <div id="main">

    </div>

    <div class="NetInflow">
      <div class="flow-title">
        资金净流入
      </div>
      <div class="flow-trash">
        <!-- //填充位置,为媒体查询服务 -->
      </div>
      <div class="flowbox" v-for="(item, index) in data" :key="index">
        <div :class="{ 'redbox': item.flow > 0, 'bluebox': item.flow <= 0 }"> {{ formatPrice(item.flow) }} </div>
      </div>
    </div>
  </div>
</template>

<script>

import axios from 'axios';


import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

export default {
  data() {
    return {
      myChart: null,
      fetchIntervalId: null,
      isMouseInside: false,
      lastMouseMoveTime: null,
      mouseInactiveTimeout: 5000, // 鼠标不活动超过10秒后开始自动滚动
      fetchInterval: 8000, // 8秒钟刷新一次数据
      rawdata: [
        
      ]
    };
  },
  methods: {
    resizeChart() {
      if (this.myChart) {
        this.myChart.resize();
      }
    },
    drawBar() {

      // Set the chart options
      this.myChart.setOption({
        // 设置图例
        legend: {
          top: 0,                    // 图例位于顶部
          right: '20',               // 图例距右侧 20 像素
          itemWidth: 15,             // 图例项目宽度为 15 像素
          data: [
            { name: '当日资金余额' }, // 图例项目 1
            { name: '当日资金限额' }  // 图例项目 2
          ],
          textStyle: {
            fontSize: 20            // 图例文字大小为 20 像素
          },
          itemHeight: 20,           // 图例项目高度为 20 像素
          height: 20                // 整个图例区域高度为 20 像素
        },
        // 设置 X 轴
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },

          formatter: function (params) {
            // 定义显示的内容
            let showContent = '';
            // 遍历数据点
            params.forEach(function (item) {
              // 根据条件过滤数据
              if (item.value > 0.1) { // 过滤0.1的凑数项
                showContent += `${item.seriesName}: ${item.value}<br/>`;
              }
            });
            // 如果没有数据点满足条件则返回空字符串，否则返回定义的内容
            return showContent || 'No data';
          }

        }, // 设置 动画
        xAxis: [
          {
            type: 'category',       // 第一个 X 轴为类别轴
            data: this.data.map(item => item.name), // 类别数据
          },
          {
            type: 'category',       // 第二个 X 轴也为类别轴
            axisLine: { show: false },  // 不显示轴线
            axisTick: { show: false },  // 不显示刻度
            axisLabel: { show: false }, // 不显示标签
            axisPointer: { type: 'none' }, // 不显示指示器
            splitArea: { show: false }, // 不显示分隔区域
            splitLine: { show: false }, // 不显示分隔线
            data: this.data.map(item => item.name), // 类别数据
          }
        ],
        // 设置 Y 轴
        yAxis: {
          type: 'value',            // Y 轴为数值轴
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,.9)",
              fontSize: "12"
            }
          },
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)"
              // width: 1,
              // type: "solid"
            }
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)"
            }
          }
        },
        // 设置数据系列
        series: [
          {
            name: '当日资金余额', // 系列名称
            type: 'bar',        // 系列类型为柱状图
            z: 1,               // 优先级为 1
            data: this.data.map(item => item.money),  // 数据为 this.money
            barWidth: 30        // 柱子宽度为 20 像素
          },
          {
            // 用于定位线形图的不可见柱状图
            name: '当日资金限额',
            stack: 'limitationGroup', // 与第三个系列堆叠
            type: 'bar',
            z: 2,                     // 优先级为 2
            xAxisIndex: 1,            // 使用第二个 X 轴
            barWidth: '100%',         // 占满 X 轴
            itemStyle: { color: 'transparent' }, // 透明颜色
            data: this.data.map(item => item.maxnum),    // 数据为 this.limitation
          },
          {
            // 可见的线形图
            name: '当日资金限额',
            stack: 'limitationGroup', // 与第二个系列堆叠
            type: 'bar',
            z: 2,                     // 优先级为 2
            xAxisIndex: 1,            // 使用第二个 X 轴
            barWidth: 40,             // 柱子宽度为 40 像素
            itemStyle: {
              borderColor: 'red', // 边框颜色为灰色
              borderWidth: 2,        // 边框宽度为 3 像素
              borderType: 'solid'   // 边框类型为虚线
            },
            label: {
              show: false,            // 显示标签
              position: 'top',     // 标签位置在右侧
              formatter: (params) => this.data.map(item => item.maxnum)[params.dataIndex] // 标签内容为 this.limitation 数组对应的值
            },
            data: Array(this.data.map(item => item.maxnum).length).fill(0.1) // 数据为长度为 this.limitation.length 的数组,每个元素都为 0.1，这样就看不见了
          }
        ]
      });
    }
    ,
    formatPrice(price) {
      return parseFloat(price).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    },
    autoFetchStocks() {
      this.fetchIntervalId = setInterval(() => {
        if (!this.isMouseInside || (new Date().getTime() - this.lastMouseMoveTime > this.mouseInactiveTimeout)) {
          this.fetchStocks();
          this.drawBar();
        }
      }, this.fetchInterval);
    },
    stopAutoFetchStocks() {
      clearInterval(this.fetchIntervalId);
      this.fetchIntervalId = null;
    },
    handleMouseMove() {
      this.isMouseInside = true;
      this.updateLastMouseMoveTime();
    },
    handleMouseLeave() {
      this.isMouseInside = false;
      this.updateLastMouseMoveTime();
    },
    updateLastMouseMoveTime() {
      this.lastMouseMoveTime = new Date().getTime();
    },

    fetchStocks() {
      axios.get('/cashFlow/findAll').then((response) => {
        console.log(response.data);
        this.rawdata = response.data.data;
      }).catch((error) => {
        console.error('Error', error);
      });
    },
  },
  created() {
    // Register the necessary components
    echarts.use([
      TitleComponent,
      TooltipComponent,
      GridComponent,
      DatasetComponent,
      TransformComponent,
      BarChart,
      LabelLayout,
      UniversalTransition,
      CanvasRenderer,
    ]);
  },
  beforeUnmount() {
    this.stopAutoScroll();
    this.stopAutoFetchStocks();
    window.removeEventListener('resize', this.resizeChart);
    if (this.chart) {
      this.chart.dispose();
    }
  },
  computed: {
    data() {
      // return this.rawdata.map(item => ({
      //   id: item.id,
      //   name: item.name,
      //   money: (item.money / 100000000).toFixed(2),
      //   maxnum: (item.maxnum / 100000000).toFixed(2),
      //   flow: (item.flow / 100000000).toFixed(2)
      // }));
      return this.rawdata
    }
  },
  mounted() {
    // Initialize the chart
    this.myChart = echarts.init(document.getElementById('main'));
    this.fetchStocks();
    this.autoFetchStocks();
    this.drawBar();
    window.addEventListener('resize', this.resizeChart);

  }
};
</script>

<style scoped>
.wrapper {

  width: 100%;

}

.tip {
  color: #add8e6;
  position: absolute;
  top: 80px;
  left: 18px;
}

#main {
  margin-left: 80px;
  height: 300px;
}

.NetInflow {
  display: flex;
  /* justify-content: space-around; */
  /* align-items: center; */
  height: 24px;

  /* background-color: #f2f2f2; */
  margin-left: 25px;
}

.flow-title {
  width: 16%;
  background-color: #06245e;
  color: #add8e6;
  height: 100%;
  margin-left: 0px;

  align-items: center;
}

.flow-trash {

  display: none
}

.flowbox {
  height: 100%;
  width: 17%;
  margin-left: 12px;
}

.redbox {
  align-items: center;
  color: #c41010;
  background-color: #5a1111;
  height: 100%;

}

.bluebox {
  text-align: center;
  height: 100%;
  color: #add8e6;
  background-color: #0f337a;
}

@media (max-width: 768px) {
  #main {
    margin-left: 0px;
    height: 200px;
  }

  .NetInflow {
    display: flex;
    /* justify-content: space-around; */
    /* align-items: center; */
    height: 24px;
    /* background-color: #f2f2f2; */
    margin-left: 1px;
  }

  .flow-title {
    position: absolute;
    width: 26px;
    background-color: #06245e;
    color: #add8e6;
    height: 115px;
    margin-left: 4px;
    top: 220px;
    align-items: center;
  }

  .flow-trash {
    width: 8%;
    display: block
  }
}
</style>